<template>
  <div class="change-password-container">
    <div class="change-password">
      <h2>修改密码</h2>
      <form @submit.prevent="changePassword">
        <div class="form-group">
          <label for="currentPassword">当前密码</label>
          <input type="password" id="currentPassword" v-model="currentPassword" required />
        </div>
        <div class="form-group">
          <label for="newPassword">新密码</label>
          <input type="password" id="newPassword" v-model="newPassword" required />
        </div>
        <button type="submit">修改密码</button>
      </form>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from "vue";
  import api from "../axios/api";
  import router from "../router";
  import { ElMessage } from "element-plus";

  const currentPassword = ref("");
  const newPassword = ref("");
  const message = ref("");

  const changePassword = async () => {
    const username = localStorage.getItem("studentId");
    try {
      // 调用后端 API
      const response = await api.changePassword(username, currentPassword.value, newPassword.value);
      // 清空表单
      currentPassword.value = "";
      newPassword.value = "";
      ElMessage.success("密码修改成功");
      router.push("/home");
      return response.data;
    } catch (error: any) {
      // 处理错误
      if (error.response) {
        message.value = error.response.data.message || "密码修改失败";
      } else {
        message.value = "网络错误，请稍后重试";
      }
    }
  };
</script>
<style lang="less" scoped>
  .change-password-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../assets/5.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    .change-password {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background-color: rgba(255, 255, 255, 0.8);
      h2 {
        text-align: center;
        margin-bottom: 20px; /* 增加标题与表单的间距 */
      }

      .form-group {
        display: flex; /* 使用 Flexbox 布局 */
        align-items: center; /* 垂直居中 */
        margin-bottom: 15px;

        label {
          flex: 0 0 100px; /* 固定 label 的宽度 */
          margin-right: 10px; /* label 和 input 之间的间距 */
          font-weight: bold; /* 加粗文本 */
        }

        input {
          flex: 1; /* 输入框占据剩余空间 */
          padding: 8px;
          box-sizing: border-box;
          border: 1px solid #ccc; /* 添加边框 */
          border-radius: 4px; /* 圆角 */
          margin-right: 50px;
        }
      }

      button {
        width: 100%;
        padding: 10px;
        background-color: #42b983;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px; /* 增大按钮字体 */
        margin-top: 10px; /* 增加按钮与表单的间距 */

        &:hover {
          background-color: #369f6e;
        }
      }

      p {
        margin-top: 15px;
        text-align: center;
        color: red;
      }
    }
  }
  .change-password-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    filter: blur(4px);
    z-index: -1;
  }
</style>
